<template>
	<div class="dis-flex t-c tabs-nav">
		<div @click="onTabClick(item)" v-for="item in panes" :class="activeName==item.name?'actived flex-1 tabs-nav-item ':'flex-1 tabs-nav-item' ">
			<span class="nav-item-inner">{{item.label}}</span>
		</div>
	</div>
</template>
<script>
	function noop() {}

	export default {
		props:{
			panes:Array,
			activeName:String,
			onTabClick:{
				type: Function,
        		default: noop
			}
		}
	}
</script>
<style>
	.tabs-nav .tabs-nav-item{
		font-size: 28px;
		color: #5D5174;
	}
	.tabs-nav .tabs-nav-item .nav-item-inner{
		position: relative;
		display: inline-block;
		padding: 18px 0;
	}
	.tabs-nav .tabs-nav-item.actived .nav-item-inner:after{
		content: " ";
		position: absolute;
		bottom: 0;
		left:0;
		height: 6px;
		width: 100%;
		background: #8733FF;
		border-radius: 100px;
	}
	.tabs-nav.top-fixed1{border-top-right-radius: 8px;border-top-left-radius: 8px;overflow: hidden;}
	.tabs-nav.top-fixed1 .tabs-nav-item.actived{background: #FFF;color: #FD4658;}
	.tabs-nav.top-fixed1 .tabs-nav-item.actived .nav-item-inner:after{
		top: 0;
		width: 80%;
		left: 10%;
		background:#FD4658;
	}
</style>